Frontendin progressiivinen parantaminen: ominaisuuksien tunnistus ja polyfillit

Jatkuvasti kehittyvässä web-kehityksen maailmassa yhtenäisen ja saavutettavan käyttökokemuksen varmistaminen eri selaimilla ja laitteilla on merkittävä haaste. Progressiivinen parantaminen (PE) tarjoaa vankan strategian tämän haasteen ratkaisemiseksi. Tämä lähestymistapa asettaa etusijalle perustoiminnallisuuden tarjoamisen kaikille käyttäjille, samalla kun se valikoivasti parantaa kokemusta niille, joilla on modernit selaimet ja laitteet, jotka tukevat edistyneitä ominaisuuksia. Tämä artikkeli syventyy progressiivisen parantamisen ydinperiaatteisiin, keskittyen kahteen keskeiseen tekniikkaan: ominaisuuksien tunnistukseen ja polyfilleihin.

Mitä on progressiivinen parantaminen?

Progressiivinen parantaminen ei ole pelkkä tekniikka; se on filosofia, joka korostaa verkkosivustojen rakentamista saavutettavuus ja ydintoiminnallisuus edellä. Se tunnustaa laajan kirjon käyttäjäagentteja, jotka käyttävät verkkoa – vanhemmista selaimista, joilla on rajalliset ominaisuudet, aina uusinta teknologiaa hyödyntäviin huippulaitteisiin. Sen sijaan, että oletettaisiin homogeeninen ympäristö, PE omaksuu heterogeenisyyden.

Perusperiaatteena on aloittaa vankasta, semanttisesta HTML-perustasta, varmistaen, että sisältö on saavutettavaa ja ymmärrettävää millä tahansa laitteella. Sitten CSS:ää käytetään ulkoasun parantamiseen, ja lopuksi JavaScriptillä lisätään interaktiivisia elementtejä ja edistyneitä toiminnallisuuksia. Avainasemassa on, että jokainen kerros rakentuu edellisen päälle rikkomatta ydinkokemusta käyttäjiltä, jotka eivät ehkä tue parannuksia.

Progressiivisen parantamisen hyödyt:

• Saavutettavuus: Varmistaa, että ydinsisältö ja -toiminnallisuus ovat kaikkien käyttäjien saatavilla heidän selaimestaan tai laitteestaan riippumatta. Tämä on elintärkeää vammaisille käyttäjille, jotka saattavat käyttää avustavia teknologioita.
• Selainyhteensopivuus: Tarjoaa yhtenäisen kokemuksen laajalla selainvalikoimalla, minimoiden rikkoutuneiden asettelujen tai toimimattomien ominaisuuksien riskin.
• Parantunut suorituskyky: Toimittamalla ensin peruskokemuksen, sivun alkuperäiset latausajat ovat usein nopeampia, mikä johtaa parempaan käyttökokemukseen.
• SEO-hyödyt: Hakukonerobotit voivat helposti päästä käsiksi sisältöön ja indeksoida sen, koska ne eivät tyypillisesti suorita JavaScriptiä.
• Tulevaisuudenkestävyys: Uusien teknologioiden ilmaantuessa progressiivinen parantaminen mahdollistaa niiden asteittaisen käyttöönoton häiritsemättä olemassa olevaa käyttökokemusta.

Ominaisuuksien tunnistus: Tiedä, mihin selaimesi pystyy

Ominaisuuksien tunnistus on prosessi, jossa ohjelmallisesti selvitetään, tukeeko tietty selain tai käyttäjäagentti tiettyä ominaisuutta, kuten CSS-ominaisuutta, JavaScript-API:a tai HTML-elementtiä. Se on luotettavampi lähestymistapa kuin selaimen nuuskiminen (selaimen tunnistaminen sen user agent -merkkijonon perusteella), jota on helppo väärentää ja joka johtaa usein epätarkkoihin tuloksiin.

Miksi ominaisuuksien tunnistus on tärkeää:

• Kohdennetut parannukset: Mahdollistaa parannusten soveltamisen vain niitä tukeviin selaimiin, välttäen virheitä ja tarpeetonta koodin suorittamista vanhemmissa selaimissa.
• Hallittu heikentäminen (Graceful Degradation): Jos ominaisuutta ei tueta, voit tarjota vararatkaisun tai vaihtoehtoisen ratkaisun, varmistaen että käyttäjillä on silti käyttökelpoinen kokemus.
• Parantunut suorituskyky: Välttää sellaisen koodin suorittamista, joka perustuu tukemattomiin ominaisuuksiin, mikä vähentää virheiden riskiä ja parantaa yleistä suorituskykyä.

Yleiset ominaisuuksien tunnistustekniikat

JavaScriptissa on useita tapoja suorittaa ominaisuuksien tunnistusta:

1. `typeof`-operaattorin käyttö

`typeof`-operaattorilla voidaan tarkistaa, onko muuttuja tai objekti määritelty. Tämä on hyödyllistä globaalien objektien tai funktioiden olemassaolon havaitsemisessa.

            if (typeof window.localStorage !== 'undefined') {
 // localStoragea tuetaan
 console.log('localStoragea tuetaan!');
} else {
 // localStoragea ei tueta
 console.log('localStoragea ei tueta!');
}
            

              
                Copy
              
            
          

2. Objektin ominaisuuksien tarkistaminen

Voit tarkistaa, onko objektilla tiettyä ominaisuutta `in`-operaattorilla tai `hasOwnProperty()`-metodilla.

            if ('geolocation' in navigator) {
 // Geolocation API:a tuetaan
 console.log('Geolocation API:a tuetaan!');
} else {
 // Geolocation API:a ei tueta
 console.log('Geolocation API:a ei tueta!');
}

if (document.createElement('canvas').getContext('2d')) {
 // Canvasta tuetaan
 console.log('Canvasta tuetaan!');
} else {
 // Canvasta ei tueta
 console.log('Canvasta ei tueta!');
}
            

              
                Copy
              
            
          

3. Modernizr

Modernizr on suosittu JavaScript-kirjasto, joka yksinkertaistaa ominaisuuksien tunnistusta. Se tarjoaa kattavan joukon testejä erilaisille HTML5-, CSS3- ja JavaScript-ominaisuuksille ja lisää ``-elementtiin luokkia, jotka ilmaisevat, mitkä ominaisuudet ovat tuettuja.

Esimerkki Modernizrin käytöstä:

            <!DOCTYPE html>
<html class="no-js"> <!-- Lisää 'no-js' -luokka -->
<head>
 <meta charset="utf-8">
 <title>Modernizr-esimerkki</title>
 <script src="modernizr.js"></script>
</head>
<body>
 <script>
 if (Modernizr.geolocation) {
 // Geolocation API:a tuetaan
 console.log('Geolocation API:a tuetaan!');
 } else {
 // Geolocation API:a ei tueta
 console.log('Geolocation API:a ei tueta!');
 }
 </script>
</body>
</html>
            

              
                Copy
              
            
          

Modernizr lisää ``-elementtiin luokkia, kuten `.geolocation` tai `.no-geolocation`, joiden avulla voit soveltaa CSS-tyylejä ominaisuustuen perusteella.

            .geolocation .my-element {
 // Tyylit selaimille, jotka tukevat geolokaatiota
}

.no-geolocation .my-element {
 // Tyylit selaimille, jotka eivät tue geolokaatiota
}
            

              
                Copy
              
            
          

4. CSS-ominaisuuskyselyt (`@supports`)

CSS-ominaisuuskyselyt, jotka käyttävät `@supports`-sääntöä, mahdollistavat CSS-tyylien ehdollisen soveltamisen selaimen tuen perusteella tietyille CSS-ominaisuuksille. Tämä on tehokas tapa toteuttaa progressiivista parantamista suoraan CSS:ssäsi.

            @supports (display: grid) {
 .container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }
}

@supports not (display: grid) {
 .container {
 float: left;
 width: 33.33%;
 }
}
            

              
                Copy
              
            
          

Tässä esimerkissä selaimet, jotka tukevat CSS Grid Layoutia, käyttävät ruudukkoon perustuvaa asettelua, kun taas vanhemmat selaimet turvautuvat float-pohjaiseen asetteluun.

Polyfillit: kuilun umpeen kurominen

Polyfill (tunnetaan myös nimellä shim) on koodinpätkä (yleensä JavaScriptiä), joka tarjoaa uudemman ominaisuuden toiminnallisuuden vanhemmille selaimille, jotka eivät tue sitä natiivisti. Polyfillien avulla voit käyttää moderneja ominaisuuksia tinkimättä yhteensopivuudesta vanhempien selainten kanssa.

Miksi polyfillit ovat tärkeitä:

• Käytä moderneja ominaisuuksia: Mahdollistaa uusimpien web-tekniikoiden käytön rajoittamatta yleisöäsi vain moderneja selaimia käyttäviin.
• Yhtenäinen kokemus: Tarjoaa yhtenäisen käyttökokemuksen eri selaimissa, vaikka niiden ominaisuustuki olisikin eri tasoilla.
• Parannettu kehitystyönkulku: Antaa sinun keskittyä parhaiden työkalujen ja tekniikoiden käyttöön murehtimatta selainyhteensopivuusongelmista.

Yleiset polyfill-tekniikat

Polyfillien toteuttamiseen on useita lähestymistapoja, jotka vaihtelevat yksinkertaisista JavaScript-funktioista monimutkaisempiin kirjastoihin.

1. Yksinkertaiset JavaScript-polyfillit

Yksinkertaisille ominaisuuksille voit usein luoda polyfillin JavaScriptillä. Esimerkiksi `Array.prototype.forEach`-metodi esiteltiin ECMAScript 5:ssä. Tässä on yksinkertainen polyfill vanhemmille selaimille:

            if (!Array.prototype.forEach) {
 Array.prototype.forEach = function(callback, thisArg) {
 if (this == null) {
 throw new TypeError('this is null or not defined');
 }

 var obj = Object(this);
 var len = obj.length >>> 0;

 if (typeof callback !== 'function') {
 throw new TypeError(callback + ' is not a function');
 }

 var context = thisArg;

 for (var i = 0; i < len; i++) {
 if (i in obj) {
 callback.call(context, obj[i], i, obj);
 }
 }
 };
}
            

              
                Copy
              
            
          

2. Polyfill-kirjastojen käyttö

Useat kirjastot tarjoavat polyfillejä laajalle joukolle ominaisuuksia. Joitakin suosittuja vaihtoehtoja ovat:

• core-js: Kattava polyfill-kirjasto, joka kattaa monet ECMAScript-ominaisuudet.
• polyfill.io: Palvelu, joka toimittaa vain ne polyfillit, joita käyttäjän selain tarvitsee sen käyttäjäagentin perusteella.
• es5-shim: Tarjoaa polyfillejä ECMAScript 5 -ominaisuuksille.

Esimerkki core-js:n käytöstä:

            <script src="https://cdn.jsdelivr.net/npm/core-js@3.36.0/index.min.js"></script>
            

              
                Copy
              
            
          

Tämä sisällyttää core-js-kirjaston CDN:stä. Voit sen jälkeen käyttää moderneja JavaScript-ominaisuuksia, ja core-js tarjoaa automaattisesti tarvittavat polyfillit vanhemmille selaimille.

3. `polyfill.io`-palvelu

Polyfill.io on palvelu, joka käyttää user agent -merkkijonoa määrittääkseen, mitä polyfillejä tarvitaan, ja toimittaa vain ne selaimelle. Tämä voi merkittävästi pienentää polyfill-paketin kokoa ja parantaa suorituskykyä.

            <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
            

              
                Copy
              
            
          

Voit määrittää polyfillattavat ominaisuudet `features`-parametrin avulla. Esimerkiksi `features=es6` polyfillää kaikki ECMAScript 6 -ominaisuudet.

Oikeiden polyfillien valinta

On tärkeää valita polyfillit huolellisesti, sillä tarpeettomien polyfillien sisällyttäminen voi kasvattaa JavaScript-pakettisi kokoa ja vaikuttaa suorituskykyyn. Harkitse seuraavia tekijöitä:

• Kohdeselaimet: Määritä selaimet, joita sinun tulee tukea, ja valitse polyfillit, jotka korjaavat puuttuvat ominaisuudet näissä selaimissa.
• Paketin koko: Minimoi polyfill-pakettisi koko käyttämällä polyfill.io:n kaltaista palvelua tai sisällyttämällä valikoivasti vain tarvittavat polyfillit.
• Ylläpito: Valitse polyfill-kirjastoja, joita ylläpidetään aktiivisesti ja päivitetään uusimmilla selainominaisuuksilla.
• Testaus: Testaa verkkosivustosi perusteellisesti eri selaimilla varmistaaksesi, että polyfillit toimivat oikein.

Esimerkkejä progressiivisesta parantamisesta käytännössä

Katsotaanpa joitakin käytännön esimerkkejä siitä, miten progressiivista parantamista voidaan soveltaa todellisissa tilanteissa:

1. HTML5-lomakkeen validointi

HTML5 esitteli sisäänrakennetut lomakkeen validointimääritteet, kuten `required`, `email` ja `pattern`. Modernit selaimet näyttävät virheilmoituksia, jos nämä määritteet eivät täyty. Vanhemmat selaimet kuitenkin jättävät nämä määritteet huomiotta. Progressiivista parantamista voidaan käyttää vararatkaisun tarjoamiseen vanhemmille selaimille.

HTML:

            <form action="/submit" method="post">
 <label for="email">Sähköposti:</label>
 <input type="email" id="email" name="email" required>
 <button type="submit">Lähetä</button>
</form>
            

              
                Copy
              
            
          

JavaScript (Polyfill):

            if (!('required' in document.createElement('input'))) {
 // HTML5-lomakkeen validointia ei tueta
 var form = document.querySelector('form');
 form.addEventListener('submit', function(event) {
 var email = document.getElementById('email');
 if (!email.value) {
 alert('Syötä sähköpostiosoitteesi.');
 event.preventDefault();
 }
 });
}
            

              
                Copy
              
            
          

Tässä esimerkissä JavaScript-koodi tarkistaa, tuetaanko `required`-määritettä. Jos ei, se lisää lomakkeeseen tapahtumankuuntelijan, joka suorittaa sähköpostin perusvalidoinnin ja näyttää hälytysviestin, jos sähköpostikenttä on tyhjä.

2. CSS3-siirtymät

CSS3-siirtymät mahdollistavat sulavien animaatioiden luomisen, kun CSS-ominaisuudet muuttuvat. Vanhemmat selaimet eivät välttämättä tue CSS3-siirtymiä. Progressiivista parantamista voidaan käyttää vararatkaisun tarjoamiseen näille selaimille.

CSS:

            .my-element {
 width: 100px;
 height: 100px;
 background-color: blue;
 transition: width 0.5s ease-in-out;
}

.my-element:hover {
 width: 200px;
}
            

              
                Copy
              
            
          

JavaScript (Vararatkaisu):

            if (!('transition' in document.documentElement.style)) {
 // CSS3-siirtymiä ei tueta
 var element = document.querySelector('.my-element');
 element.addEventListener('mouseover', function() {
 element.style.width = '200px';
 });
 element.addEventListener('mouseout', function() {
 element.style.width = '100px';
 });
}
            

              
                Copy
              
            
          

Tässä esimerkissä JavaScript-koodi tarkistaa, tuetaanko CSS3-siirtymiä. Jos ei, se lisää elementtiin tapahtumankuuntelijoita, jotka manipuloivat suoraan `width`-ominaisuutta hiiren ollessa päällä, tarjoten perusanimaatiotehosteen.

3. Web Storage (localStorage)

Web Storage (localStorage ja sessionStorage) tarjoaa tavan tallentaa tietoja paikallisesti käyttäjän selaimessa. Vanhemmat selaimet eivät välttämättä tue Web Storagea. Progressiivista parantamista voidaan käyttää vararatkaisun tarjoamiseen evästeiden avulla.

            function setItem(key, value) {
 if (typeof localStorage !== 'undefined') {
 localStorage.setItem(key, value);
 } else {
 // Käytä evästeitä vararatkaisuna
 document.cookie = key + '=' + value + '; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/';
 }
}

function getItem(key) {
 if (typeof localStorage !== 'undefined') {
 return localStorage.getItem(key);
 } else {
 // Lue evästeistä
 var name = key + "=";
 var decodedCookie = decodeURIComponent(document.cookie);
 var ca = decodedCookie.split(';');
 for(var i = 0; i <ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) == ' ') {
 c = c.substring(1);
 }
 if (c.indexOf(name) == 0) {
 return c.substring(name.length, c.length);
 }
 }
 return "";
 }
}
            

              
                Copy
              
            
          

Tämä esimerkki osoittaa, kuinka asetetaan ja haetaan kohteita käyttämällä localStoragea, jos sitä tuetaan, ja turvaudutaan evästeisiin, jos ei tueta.

Kansainvälistämiseen liittyviä huomioita

Kun toteutat progressiivista parantamista globaalille yleisölle, ota huomioon seuraavat kansainvälistämiseen liittyvät seikat:

• Kielituki: Varmista, että polyfillisi ja vararatkaisusi tukevat eri kieliä ja merkistöjä.
• Lokalisointi: Käytä lokalisointitekniikoita kääntääksesi virheilmoitukset ja käyttöliittymän elementit.
• Saavutettavuus: Noudata saavutettavuusohjeita (WCAG) varmistaaksesi, että verkkosivustosi on vammaisten henkilöiden käytettävissä heidän sijainnistaan tai kielestään riippumatta.
• Testaus: Testaa verkkosivustosi perusteellisesti eri kielillä ja alueilla varmistaaksesi, että progressiivisen parantamisen tekniikat toimivat oikein.
• Kulttuurinen herkkyys: Ole tietoinen kulttuurieroista ja vältä idiomien tai metaforien käyttöä, joita ei ehkä ymmärretä muissa kulttuureissa. Esimerkiksi päivämäärämuodot vaihtelevat kulttuureittain (KK/PP/VVVV vs. PP/KK/VVVV). Käytä Moment.js:n kaltaista kirjastoa päivämäärien asianmukaiseen muotoiluun.

Työkalut ja resurssit

• Modernizr: JavaScript-kirjasto ominaisuuksien tunnistukseen. (https://modernizr.com/)
• core-js: Modulaarinen standardikirjasto JavaScriptille. (https://github.com/zloirock/core-js)
• polyfill.io: Palvelu, joka toimittaa polyfillejä käyttäjäagentin perusteella. (https://polyfill.io/)
• Can I use...: Verkkosivusto, joka tarjoaa ajantasaiset selainten tukitaulukot eri web-tekniikoille. (https://caniuse.com/)
• MDN Web Docs: Kattava dokumentaatio web-tekniikoille. (https://developer.mozilla.org/en-US/)
• WCAG (Web Content Accessibility Guidelines): Kansainväliset standardit verkon saavutettavuudelle. (https://www.w3.org/WAI/standards-guidelines/wcag/)

Yhteenveto

Progressiivinen parantaminen on arvokas lähestymistapa web-kehitykseen, joka varmistaa yhtenäisen ja saavutettavan käyttökokemuksen laajalla selain- ja laitevalikoimalla. Käyttämällä ominaisuuksien tunnistusta ja polyfillejä voit hyödyntää uusimpia web-tekniikoita ja samalla tarjota vankan perustan vanhempia selaimia käyttäville. Tämä ei ainoastaan paranna käyttökokemusta, vaan myös edistää saavutettavuutta, hakukoneoptimointia ja verkkosovellustesi tulevaisuudenkestävyyttä. Progressiivisen parantamisen periaatteiden omaksuminen johtaa vankempiin, ylläpidettävämpiin ja käyttäjäystävällisempiin verkkosivustoihin globaalille yleisölle.